<template>
	<view class="page-body">
		<view class="content">
			<view class="row">
				<view class="nominal">
					收件人
				</view>
				<view class="input">
					<input placeholder="请输入收件人姓名" type="text" v-model="name" @blur="blur" />
				</view>
			</view>
			<view class="row">
				<view class="nominal">
					电话号码
				</view>
				<view class="input">
					<input placeholder="请输入收件人电话号码" type="number" maxlength="11" v-model="tel" @blur="blur" />
				</view>
			</view>
			<view class="row">
				<view class="nominal">
					所在地区
				</view>
				<view class="input" @tap="chooseCity">
					<!-- {{province}}-{{city}}-{{county}} -->
					{{cities}}
				</view>
				
			</view>
			<view class="row">
				<view class="nominal">
					详细地址
				</view>
				<view class="input">
					<textarea class="textarea" v-model="detailed" auto-height="true" placeholder="输入详细地址"  @blur="blur"></textarea>
				</view>
			</view>
		</view>
		<!-- <view class="mt15 linedefalut flex">
			<view class="nominal">
				设置默认地址
			</view>
			<view class="input switch">
				<switch color="#FF7201" :checked="isDefault" @change=isDefaultChange />
			</view>
		</view> -->
		<view class="footer" @tap="updateAddress" v-if="editType=='edit'">
			<view class="button">
				保存地址
			</view>
		</view>
		<view class="footer" @tap="save" v-else>
			<view class="button">
				保存地址
			</view>
		</view>
		<mpvue-picker ref="mpvuePicker" :mode="mode" :deepLength="deepLength" onCancel="onCancel" :pickerValueDefault="cityPickerValue" @onConfirm="onConfirm"  :pickerValueArray="cityValueArray"></mpvue-picker>
	</view>
</template>

<script>
	import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
	import {isPoneAvailable,TimeStorage} from '@/utils/utils.js';
	import RegionData from '@/components/mpvue-picker/RegionCodes.js'
	var that;
	export default {
		components: {
			mpvuePicker
		},
		data() {
			return {
				editType:'edit',
				id:'',
				name:'',
				tel:'',
				detailed:'',
				isDefault:false,
				cityPickerValue: [0, 0, 1],
				themeColor: '#007AFF',
				cities:"请点击选择地址",
				province:"",
				city:"",
				county:"",
				cityValueArray:RegionData,
				mode:"multiLinkageSelector",
				deepLength:3,
				cityCodeArr:[]
			};
		},
		onLoad(e) {
			that=this;
			//获取传递过来的参数
			this.editType = e.type;
			if(e.type=='edit'){
				uni.getStorage({
					key:'address',
					success: (e) => {
						this.id = e.data.id;
						this.name = e.data.consignee;
						this.tel = e.data.tel;
						this.detailed = e.data.address;
						this.isDefault = e.data.selected?true:false;
						var areaArr=[];
						e.data.areaid=e.data.areaid.split('|');
						e.data.areaid.forEach(item=>{
							areaArr.push(parseInt(item))
						}) ;
						this.cityPickerValue = areaArr
						this.province = e.data.province;
						this.city = e.data.city;
						this.county = e.data.county;
						this.cities =`${this.province}-${this.city}-${this.county}` ;
					}
				})
			}
		},
		methods: {
			onCancel(e) {
				console.log(e)
			},
			chooseCity() {
				this.$refs.mpvuePicker.show();
			},
			onConfirm(e) {
				this.cities = e.label;
				this.cityPickerValue = e.index;
				this.cityCodeArr = e.value
			},
			isDefaultChange(e){
				this.isDefault = e.detail.value;
			},
			save(){
				let regionArr = this.cities.split('-');
				let province = regionArr[0];
				let city = regionArr[1];
				let county = regionArr[2];
				let param={"consignee":this.name,"tel":this.tel,"province":province,"city":city,"county":county,"address":this.detailed,"isDefault":this.isDefault,"areaid":this.cityPickerValue,"cityCodeArr":this.cityCodeArr}
				if(this.editType=='edit'){
					param.id = this.id
				}
				if(!this.checkAddress(param))return;
				this.$https.POST({
					url:'/user/insertAddress',
					data:{
					  consignee: param.consignee,
					  tel: param.tel,
					  province: param.province,
					  city: param.city,
					  county: param.county,
					  address: param.address,
					  selected: param.isDefault?1:0,
					  areaid:param.areaid.join("|"),
					  province_code:param.cityCodeArr[0],
					  city_code:param.cityCodeArr[1]
					},
					loading:true,
					success(res){
						that.$showToast(res.message)
						setTimeout(()=>{
							uni.navigateBack()
						},800)
					}
				})
			},
			updateAddress(){
				let regionArr = this.cities.split('-');
				let province = regionArr[0];
				let city = regionArr[1];
				let county = regionArr[2];
				let param={"consignee":this.name,"tel":this.tel,"province":province,"city":city,"county":county,"address":this.detailed,"isDefault":this.isDefault,"areaid":this.cityPickerValue,"cityCodeArr":this.cityCodeArr}
				if(this.editType=='edit'){
					param.id = this.id
				}
				if(!this.checkAddress(param))return;
				this.$https.POST({
					url:'/user/updateAddress',
					data:{
					  id:param.id,
					  consignee: param.consignee,
					  tel: param.tel,
					  province: param.province,
					  city: param.city,
					  county: param.county,
					  address: param.address,
					  selected: param.isDefault?1:0,
					  areaid:param.areaid.join("|"),
					  province_code:param.cityCodeArr[0],
					  city_code:param.cityCodeArr[1]
					},
					loading:true,
					success(res){
						that.$showToast(res.message)
						setTimeout(()=>{
							uni.navigateBack()
						},800)
					}
				})
			},
			
			checkAddress(param){
				if(!param.consignee){
					uni.showToast({title:'请输入收件人姓名',icon:'none'});
					return false;
				}
				if(!param.tel){
					uni.showToast({title:'请输入收件人电话号码',icon:'none'});
					return false;
				}
				if(!isPoneAvailable(param.tel)){
					uni.showToast({title:'请输入正确的电话号码',icon:'none'});
					return false;
				}
				if(!param.city){
					uni.showToast({title:'请输入选择所在地区',icon:'none'});
					return false;
				}
				if(!param.address){
					uni.showToast({title:'请输入收件人详细地址',icon:'none'});
					return false;
				}
				if(param.areaid.length==0){
					uni.showToast({title:'请选择收件地址',icon:'none'});
					return false;
				}
				return true
			},
			blur(){
				uni.hideKeyboard()
			}
		},
		onBackPress() {
			if (this.$refs.mpvuePicker.showPicker) {
				this.$refs.mpvuePicker.pickerCancel();
				return true;
			}
		},
		onUnload() {
			if (this.$refs.mpvuePicker.showPicker) {
				this.$refs.mpvuePicker.pickerCancel()
			}
		}
	};
</script>
<style lang="scss">
.page-body{background: #f6f6f6;}
.footer{
	position: fixed;bottom: 0;left: 0;width: 100%;padding:14upx 40upx;background: #fff;box-sizing: border-box;
	.button{
		line-height: 80upx;
		height: 80upx;
		border-radius: 10upx;
		overflow: hidden;
		background: $maincolor;
		width: 100%;
	}
}
.content{
	display: flex;
	flex-wrap: wrap;
	background: #fff;
	view{
		display: flex;
	}
	.row{
		width: 94%;
		
		margin: 0 3%;
		border-top: solid 1upx #eee;
		.nominal{
			width: 30%;
			height: 120upx;
			font-weight: 200;
			font-size: 30upx;
			align-items: center;
		}
		.input{
			width: 70%;
			padding: 10upx 0;
			align-items: center;
			font-size: 30upx;
			input{line-height: 100upx;height: 100upx;width: 100%;}
			&.switch{
				justify-content: flex-end;
			}
			.textarea{
				padding: 20upx 0; line-height: 46upx;
				min-height: 50upx;
			}
		}
	}
}
.linedefalut{
	justify-content: space-between; background: #fff;line-height: 88upx;padding:0 24upx ;border-bottom: 1px solid #e8e8e8;font-size: 30upx;color: #666;
}
</style>
